<!--
 * @Author: xxx
 * @Description: 登录界面     @keyup.enter="buttonLogin"
-->
<template>
	<div class="page_user user_info password" id="password">
		<div class="div_info">
			<p class="div_title"> 密码修改 </p>
			<el-form class="login-form" ref="ruleFormRef" label-width="120px" :label-position="'right'"
				:model="ruleForm" :rules="rules">
				<el-form-item label="输入原始密码:" prop="o_password">
					<el-input size="large" class="input" v-model="ruleForm.o_password" prefix-icon="Lock"
						type="password">
					</el-input>
				</el-form-item>
				<el-form-item label="设置新密码:" prop="password">
					<el-input size="large" class="input" v-model="ruleForm.password" prefix-icon="Lock" type="password">
					</el-input>
				</el-form-item>

				<el-form-item label="确认密码:" prop="confirm_password">
					<el-input size="large" class="input" v-model="ruleForm.confirm_password" prefix-icon="Lock"
						type="password">
					</el-input>
				</el-form-item>
			</el-form>
			<div class="right_msg">
				<el-button class="button" type="primary" @click="change_password()">确认修改</el-button>
			</div>
		</div>
	</div>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
		onMounted
	} from "vue";
	import {
		useStore
	} from "vuex";
	import {
		useRouter
	} from "vue-router";
	import {
		$post,
		$get
	} from "@/api/Api.js";
	import storageHelper from '@/libs/StorageHelper'
	let router = useRouter();
	let store = useStore();
	let ruleFormRef = ref(null);
	let identifyState = ref(false);
	let ruleForm = ref({
		o_password: "",
		password: "",
		confirm_password: "",
	});

	let rules = ref({
		o_password: [{
				required: true,
				message: "输入原始密码",
				trigger: "blur",
			},
			{
				min: 5,
				max: 16,
				message: "密码长度为在5-16个字符",
				trigger: "blur"
			},
		],

		password: [{
				required: true,
				message: "设置新密码",
				trigger: "blur",
			},
			{
				min: 5,
				max: 16,
				message: "密码长度为在5-16个字符",
				trigger: "blur"
			},
		],
		confirm_password: [{
			required: true,
			message: "确认密码",
			trigger: "blur",
		}, ]
	});

	//退出登录
	let sign_out = (payload) => store.commit("userStoreModule/sign_out", payload);
	let sign_out_fun = () => {
		sign_out([]);
		$get("/api/user/quit", {}).then((res) => {
			store.commit("web/set_auth", []);
			sessionStorage.clear();
			localStorage.clear();
			router.replace("/");
		})

	}
	// 登录
	let change_password = async () => {
		let valid = await ruleFormRef.value.validate();
		if (valid) {
			let {
				password,
				o_password
			} = ruleForm.value;
			let form = {
				password: password,
				o_password: o_password
			};
			// form.is_face = "face";
			$post("/api/user/change_password", form, ).then((res) => {
				if (res.result) {
					//弹出更改成功，3秒后调到主页，退出账户
					sign_out_fun()


				} else if (res.error) {
					identifyState.value = true;
					ElMessage.error(res.error.message);
				}
			});
			ruleFormRef.value.resetFields()
		}
	};

	onMounted(() => {
		// refreshCode();
	});

	/**
	 * 验证原始密码
	 */
	let validation_o_password = computed(() => {
		let length = ruleForm.value.o_password.length;
		if (!length) {
			return null;
		}
		return length > 4 && length < 17;
	})
	/**
	 * 验证密码
	 */
	let validation_password = computed(() => {
		let length = ruleForm.value.password.length;
		if (!length) {
			return null;
		}
		return length > 4 && length < 17;
	})
	/**
	 * 再次验证密码
	 */
	let validation_confirm_password = computed(() => {
		return ruleForm.value.confirm_password === ruleForm.value.password;
	})
</script>

<style lang="less">
	.div_info {
		min-height: 500px;
		width:50%;
		margin:20px auto;
		padding:20px;
		border: 2px solid var(--primary_color);
		text-align: left;
		.div_title{
			font-size:28px;
			margin: 30px 0;
			padding-bottom:20px;
		    border-bottom: 2px solid var(--primary_color);
		
		}
	}
	
	.content_msg {
		justify-content: space-between;
		
		margin: 30px 0;
		// border: 1px solid red;
	}
	
	.right_msg {
		margin-left: 120px;
	}
	
	.right_msg .change_avatar_box {
		cursor: pointer;
		position: relative;
		display: flex;
		margin-left: 5px;
	}
	
	.right_wrap {
		margin: 0 10px;
	}
	
</style>
